<template>
    <div class="statisticsTag">
        <div class="tag">
            <div class="tag_left" @click="goToLastGroup" v-if="moveDistance">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="tag_container" :style="{'width': data.length*(tagWidth+tagMarginRight)+'px','transform': 'translateX('+ moveDistance +'px)','transition': 'transform 0.5s'}">
                <div class="tag_container_item" v-for="(item,index) in data" :key="index" 
                    @click="searchStatus(item.status)"
                    :style="{'margin-right': tagMarginRight+'px','width': tagWidth+'px', 'background-color': '#2f9ceb', 'background-image': `linear-gradient(to right, ${item.backgroundStart},${item.backgroundEnd})`}">
                    <div class="tag_container_item_left">
                        <div class="tag_container_item_left_title">{{item.label}}</div>
                        <div class="tag_container_item_left_content">
                            合计 <span class="tag_container_item_left_content_number">
                                <countTo :startVal='startVal' :endVal='item.total' :duration='3600'></countTo>
                            </span>
                            <span v-if="item.flag === 'many' ? false : true">位</span>
                            <span v-if="item.flag === 'many' ? true : false">个</span>
                        </div>
                    </div>
                    <div class="tag_container_item_right">
                        <i :class="['iconfont',item.icon]"></i>
                    </div>
                </div>
            </div>
            <div class="tag_right" @click="nextGroup" v-if="data.length>moveTagCount+(-moveDistance)/(tagMarginRight+tagWidth)">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
    name: 'statisticsTag',
    props: ['data'],
    components: {
        CountTo
    },
    data() {
        return {
            moveDistance: 0,  
            tagWidth: 276,
            tagMarginRight:22,
            moveTagCount: 0,
            startVal: 0             // 数字滚动 -- 开始数字
        }
    },
    methods: {
        goToLastGroup(){
            this.moveDistance += this.moveTagCount * (this.tagWidth + this.tagMarginRight);
            if(this.moveDistance>0){
                this.moveDistance = 0;
            }
        },
        nextGroup(){
            this.moveDistance -= this.moveTagCount * (this.tagWidth + this.tagMarginRight);
        },
        getMoveTagCount(){
            let winWidth = window.innerWidth;  // 获取窗口宽度
            let number = parseInt((winWidth - 180 - 50*2) / (this.tagWidth + this.tagMarginRight));
            if((winWidth - 180 - 50*2)-(this.tagWidth + this.tagMarginRight)*number>=this.tagWidth){
                number++;
            }
            this.moveTagCount = number;
        },
        searchStatus(status){
            this.$emit('searchStatus',status)
        }
    },
    mounted(){
        this.getMoveTagCount();
        window.onresize = () => {
            return (() => {
                console.log('document.body.clientWidth:',document.body.clientWidth)
                this.getMoveTagCount();
            })()
        }
    }
}
</script>

<style lang="scss" scoped>
.statisticsTag{
    .tag{
        width: 100%;
        box-sizing: border-box;
        padding: 0px 30px;
        // background: #deefef;
        overflow: hidden;
        position: relative;
        z-index: 9;
        &_arrow{
            width: 30px;
            height: 100%;
            position: absolute;
            font-size: 24px;
            background: #f5f6fa;
            top: 0px;
            cursor: pointer;
            text-align: center;
            line-height: 94px;
            z-index: 99;
        }
        &_left{
            @extend .tag_arrow;
            left: 0px;
        }
        &_right{
            @extend .tag_arrow;
            right: 0px;
        }
        &_container{
            overflow: hidden;
            display: flex;
            &_item{
                height: 94px;
                border-radius: 6px;
                box-sizing: border-box;
                padding: 20px;
                display: flex;
                cursor: pointer;
                transition: all .3s;
                &:hover{
                    transform: scale(0.94);
                }
                &_left{
                    flex: 1;
                    color: #fff;
                    position: relative;
                    top: -5px;
                    &_title{
                        font-size: 20px;
                        line-height: 30px;
                        width: 184px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    &_content{
                        font-size: 16px;
                        line-height: 36px;
                        width: 184px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        &_number{
                            font-size: 28px;
                        }
                    }
                }
                &_right{
                    width: 50px;
                    height: 50px;
                    border-radius: 100%;
                    border: 1px solid #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &>i{
                        font-size: 26px;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>